// State Hook 之 useState() 的使用

// 1 导入 useState
import React, { useState } from "react";

const HookCounter = () => {
  // 获取状态和管理状态的函数，数字类型
  const [count, setCount] = useState(0);

  // 字符串类型
  const [msg, setMsg] = useState("Hello");

  // 数组类型
  const [books, addBook] = useState([
    { id: 1, name: "React" },
    { id: 2, name: "Vue" },
  ]);

  // 按钮点击监听
  const handleCount = () => {
    // console.log(setCount(count+1))
    setCount(count + 1);
  };

  return (
    <div>
      <ul>
        {books.map((item) => (
          <li key={item.id}>{item.name}</li>
        ))}
      </ul>
      <button
        onClick={() =>
          addBook([
            ...books,
            { id: Math.random(), name: Math.random().toString(36).slice(-8) },
          ])
        }
      >
        添加书籍
      </button>
      <p onClick={() => setMsg(msg + "World")}>{msg}</p>
      <button onClick={handleCount}>按钮被点击了{count}次</button>
      {/* <button onClick={() => setCount(count + 1)}>按钮被点击了{count}次</button> */}
    </div>
  );
};

export default HookCounter;
